<link rel="stylesheet" type="text/css" href="/static/css/background/user-manage.css" />
<div id="app">
    <button type="button" class="btn btn-primary" data-toggle="modal" @click="dialog($event)" data-whatever="添加">添加</button>
    <button type="button" class="btn btn-primary" data-toggle="modal" @click="dialog($event)" data-whatever="修改">修改</button>
    <button type="button" class="btn btn-primary" data-toggle="modal" @click="send($event)" data-whatever="删除">删除</button>
    <button type="button" class="btn btn-primary" data-toggle="modal" @click="send($event)" data-whatever="导出">导出</button>
    <table class="table">
        <thead>
            <tr>
                <td>ID</td>
                <td>名字</td>
                <td>密码</td>
                <td>用户类型</td>
            </tr>
        </thead>
        <tbody>
            <tr class="hang" v-for="(user,index) in userList" :data-index=index @click="selectRow($event)" v-cloak>
                <td>{{user.u_id}}</td>
                <td>{{user.u_name}}</td>
                <td>{{user.u_password}}</td>
                <td>{{user.d_name}}</td>
            </tr>
        </tbody>
    </table>
    <ul class="pagination">
        <li v-for="n in pageCount">
            <a href="javascript:void (0)" :class="activeNumber === n ? 'active' : ''" @click=selectPageCount($event)>{{ n }}</a>
        </li>
    </ul>

    <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="exampleModalLabel">{{type}}</h4>
                </div>
                <div class="modal-body">
                    <form class="user_info">
                        <input style="display: none" id="u_id" />
                        <div class="form-group">
                            <label for="u_name" class="control-label">账号:</label>
                            <input type="text" class="form-control" id="u_name">
                        </div>
                        <div class="form-group">
                            <label for="u_password" class="control-label">密码:</label>
                            <input type="text" class="form-control" id="u_password">
                        </div>
                        <div class="form-group">
                            <label for="u_type" class="control-label">类型:</label>
                            <select class="form-control" id="u_type">
                                <option v-for="utype in utypes" :value=utype.d_id >{{utype.d_name}}</option>
                            </select>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary put" @click="send($event)">{{type}}</button>
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript" src="/static/js/user-manage.js"></script>